<template>
  <div id="modify-password">
    <el-form :model="pwdForm"
             :rules="rules"
             label-width="110px"
             :label-position="'right'"
             ref="pwdForm">
      <el-form-item label="原密码："
                    prop="oldPwd"
                    hide-required-asterisk>
        <el-input name="oldPwd"
                  placeholder="请输入原密码"
                  type="password"
                  v-model="pwdForm.oldPwd"
                  :show-password="!!pwdForm.oldPwd"
                  clearable />
      </el-form-item>
      <el-form-item label="新密码："
                    prop="newPwd"
                    hide-required-asterisk>
        <el-input name="newPwd"
                  placeholder="请输入新密码"
                  type="password"
                  v-model="pwdForm.newPwd"
                  :show-password="!!pwdForm.newPwd"
                  clearable />
      </el-form-item>
      <el-form-item label="重复新密码："
                    prop="rePwd"
                    hide-required-asterisk>
        <el-input name="rePwd"
                  placeholder="请再次输入新密码"
                  type="password"
                  v-model="pwdForm.rePwd"
                  :show-password="!!pwdForm.rePwd"
                  clearable />
      </el-form-item>
    </el-form>
    <el-row class="btn-row">
      <el-button @click="updateHandle"
                 type="primary">提交</el-button>
    </el-row>
  </div>
</template>

<script>
import { updatePassword } from '@/api/user'
import { mapGetters } from 'vuex'

export default {
  data () {
    var checkPwd = (rule, value, callback) => {
      if (this.pwdForm.rePwd !== this.pwdForm.newPwd) {
        callback(new Error('两次输入的密码不一致'))
      } else { callback() }
    }
    return {
      pwdForm: {
        oldPwd: '', // 旧密码
        newPwd: '', // 新密码
        rePwd: '' // 再次输入
      },
      rules: {
        oldPwd: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: checkPwd, trigger: ['change', 'blur'] }
        ],
        rePwd: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: checkPwd, trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userid'])
  },
  methods: {
    updateHandle () {
      this.$refs.pwdForm.validate((valid) => {
        if (valid) {
          this.$confirm('是否确认修改？', '警告', {
            type: 'warning'
          })
            .then(() => {
              updatePassword(this.userid, this.pwdForm.oldPwd, this.pwdForm.newPwd)
                .then((res) => {
                  if ('error' in res.data) {
                    this.$notify.error({
                      title: '错误',
                      message: res.data.error,
                      position: 'bottom-right'
                    })
                  } else {
                    this.$notify.success({
                      title: '成功',
                      message: '修改成功，请重新登录！',
                      position: 'bottom-right'
                    })
                    this.$router.push('login')
                  }
                })
            })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.btn-row
  display flex
  flex-direction row
  justify-content flex-end
</style>
